{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% from "macros.html" import sub_nav with context %}
{% from "macros-protocol.html" import callout, callout_compact, picto with context %}

{% block page_og_title %}{{ self.page_title() }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('protocol-newsletter') }}
  {{ css_bundle('protocol-callout') }}
  {{ css_bundle('firefox_channel') }}
{% endblock %}

{% block body_class %}{% endblock %}

{% block sub_navigation %}
{{ sub_nav(
  title={
    'text':  ftl('sub-navigation-firefox'),
    'href':  "https://www.firefox.com/?redirect_source=mozilla-org",
    'cta_name': "Firefox",
    'icon': static('protocol/img/logos/firefox/browser/logo.svg')
  },
  links=[
  {
    'text': ftl('sub-navigation-nightly-and-beta', fallback='firefox-channel-desktop'),
    'href': url('firefox.channel.desktop'),
    'cta_name': "Nightly and Beta"
  },
  {
    'text': ftl('sub-navigation-android-nightly-and-beta', fallback='firefox-channel-android'),
    'href': url('firefox.channel.android'),
    'cta_name': "Android Nightly and Beta"
  },
  {
    'text': ftl('sub-navigation-ios-test-flight', fallback='firefox-channel-ios'),
    'href': url('firefox.channel.ios'),
    'cta_name': "iOS TestFlight"
  }]
) }}
{% endblock %}

{% block content %}
<main>
  {% call callout(
    title=ftl('firefox-channel-take-a-browse-on-the-wild-side'),
    desc=ftl('firefox-channel-be-among-the-first-to-explore'),
    class='mzp-t-hero mzp-t-firefox mzp-t-product-firefox mzp-t-background-secondary',
    include_cta=False,
    heading_level=1,
    brand=True,
    brand_product='firefox',
    brand_type='logo',
    brand_size='xl') %}
  {% endcall %}

  {% block channels %}{% endblock %}

  <aside class="mzp-t-picto-center">
  {% call picto(
    image=resp_img(
      url='img/icons/warning.svg',
      optional_attributes={
        'class': 'mzp-c-picto-image',
        'width': '44',
        'loading': 'lazy'
      }
    ),
    heading_level=2,
    title=ftl('firefox-channel-see-something-that-isnt-working'),
    body=True,
    ) %}
      <ul>
        <li><a class="mzp-c-cta-link" href="https://bugzilla.mozilla.org/enter_bug.cgi">{{ ftl('firefox-channel-file-a-bug-now') }}</a></li>
        <li><a class="mzp-c-cta-link" href="https://support.mozilla.org/kb/contributors-guide-writing-good-bug">{{ ftl('firefox-channel-tips-for-filing-a-bug') }}</a></li>
      </ul>
      {% endcall %}
    </aside>

  <section class="t-newsletter">
    <div class="mzp-l-content">
      {{ email_newsletter_form(
        button_class='mzp-t-product mzp-t-lg',
        title=ftl('newsletter-form-firefox-and-you'),
        desc=ftl('newsletter-form-get-firefox-tips')) }}
    </div>
  </section>
</main>
{% endblock %}

{% block js %}
  {{ super() }}
  {{ js_bundle('newsletter') }}
{% endblock %}
